<template>
    <div>
         <div class="shopList">
           <!-- 购买商品区 -->
           <div class="mui-card" v-for="(item,i) in goodsList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner mui_content">
						 <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                          @change ="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"
                         ></mt-switch>
                         <img :src="item.thumb_path" alt="">
                         <div class="mui_reason">
                             <h1>{{ item.title }}</h1>
                             <p>
                                 <span>￥{{ item.sell_price }}</span>
                                 <numbox :initCount = "$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                 <a href="#" @click.prevent="delShop(item.id,i)">删除{{ $store.getters.getGoodsCount[item.id]}}</a>
                             </p>
                         </div>
					</div>
				</div>
			</div>

           <!-- 结算区 -->
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p> 总计(不含运费)</p>
                        <p class="goSell">
                            已勾选商品
                            <span>{{ this.$store.getters.getGoodsCountAndAmount.count }}</span>件,
                            总价:
                            <span>￥{{ this.$store.getters.getGoodsCountAndAmount.amount }}</span>
                            <mt-button type="danger">去结算</mt-button>
                        </p>
					</div>
				</div>
			</div>
            
            <!-- 输出获取的选中商品id -->
            <p>{{this.$store.getters.getGoodsSelected}}</p>
         </div>
        
        
    </div>
</template>
<script>
// 引入number框
import numbox from './subcomponents/numberBox.vue'

export default {
    data(){
        return {
           goodsList: [],//发送请求获取到的数据
        }
    },
    created() {
       this.getShopList()
    },
    methods:{
       
       getShopList(){
           var idArr = [];
             // 从store中获取car中的数量
        this.$store.state.car.forEach(item => idArr.push(item.id))
        //   如果idArr没有数据就return 防止报错
        if(idArr.length<= 0){
            return;
        };

          this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then(result => {
              if(result.body.status === 0){
                  this.goodsList = result.body.message; 
              }
          })
       },
       delShop(id,index){
           this.goodsList.splice(index,1)
           this.$store.commit("delCar",id)
       },
    //    同步选中按钮的状态
    selectedChanged(id,val){
    //   console.log(id+"---"+val)每次点击开关吧最新的数据同步到store中
      this.$store.commit("updateGoodsSelected",{id,selected:val});
    }
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss" scoped>
            .shopList {
                height: 1000px;
            }
           .mui_content {
               display: flex;
               align-items: center;
               img {
                   height: 60px;
                   width: 60px;
               }
           }
           .mui_reason {
               p {
                   display: flex;
                   margin: 0;
                   margin-top: 14px;
                   div {
                       margin: -2px 3px 0 3px; 
                   }
               }
               h1 {
                   font-size: 14px;
                   font-weight: normal;
               }
           }
       .goSell {
           position: relative;
           span {
               font-weight: 700;
               color: red;
           }
           button {
               position: absolute;
               right: 0;
               top: -20px;
           }
       }
</style>
